import {
  Authenticator,
  CheckboxField,
  useAuthenticator,
} from '@aws-amplify/ui-react';

import { Example, ExampleCode } from '@/components/Example';
import { InlineFilter } from '@/components/InlineFilter';

## Sign Up Fields

The following example customizes the Sign Up screen by:

- Re-using the default Sign Up form fields
- Appending a custom "Terms and Conditions" checkbox with a `validateCustomSignUp` service

**Note**: In the example code below, `preferred_username` is not set as an attribute because it has already been defined through [Zero Configuration](./configuration#sign-up-attributes). You may also notice that the `acknowledgement` field is not being sent. This occurs since `acknowledgement` is not a known attribute to Cognito. To assign it as a custom attribute instead, the name field must have the `custom:` prefix.

<InlineFilter filters={['angular']}>
_app.component.ts_

```ts{14-22} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/custom-sign-up-fields/custom-sign-up-fields.component.ts

```

_app.component.html_

```html{1-14} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/custom-sign-up-fields/custom-sign-up-fields.component.html

```
</InlineFilter>
<InlineFilter filters={['react']}>
```tsx{7-9,24} file=../../../../../../../examples/next/pages/ui/components/authenticator/custom-sign-up-fields/index.page.tsx#L13-

```
</InlineFilter>
<InlineFilter filters={['vue']}>
```html file=../../../../../../../examples/vue/src/pages/ui/components/authenticator/custom-sign-up-fields/index.vue

```
</InlineFilter>
<InlineFilter filters={['svelte']}>
```html file=../../../../../../../examples/svelte/src/routes/ui/components/authenticator/custom-sign-up-fields/+page.svelte

```
</InlineFilter>

<Example>
  <Authenticator
    initialState="signUp"
    loginMechanisms={['email']}
    signUpAttributes={['preferred_username']}
    components={{
      SignUp: {
        FormFields() {
          const { validationErrors } = useAuthenticator();
          return (
            <>
              <Authenticator.SignUp.FormFields />

              <CheckboxField
                errorMessage={validationErrors.acknowledgement}
                hasError={!!validationErrors.acknowledgement}
                name="acknowledgement"
                value="yes"
                label="I agree with the Terms and Conditions"
              />
            </>
          );
        },
      },
    }}
    services={{
      async validateCustomSignUp(formData) {
        if (!formData.acknowledgement) {
          return {
            acknowledgement: 'You must agree to the Terms and Conditions',
          };
        }
      },
    }}

/>

</Example>

> If you'd like to add an attribute please first consider using the [Sign Up Attributes](configuration#sign-up-attributes) prop. In some instances you may want to add an app-specific attribute. In those cases you can add a new form element to the Sign Up form fields. Be aware the HTML `name` attribute on the new form field must match the name of the Cognito attribute. If the cognito attribute is a [custom attribute](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-attributes.html) it must have the `custom:` prefix in the HTML attribute name.

<Example>
  <ExampleCode>
  ```js
    const formFields = {
      signUp: {
        email: {
          order:1
        },
        password: {
          order: 2
        },
        confirm_password: {
          order: 3
        },
        'custom:your_custom_attribute': {
          order: 4
        }
      },
    }
  ```
  </ExampleCode>
</Example>
